<template>
  <div>
    <van-index-bar :index-list='computerList'
                   @select='select'>
      <van-index-anchor index='热门城市' />
      <van-cell v-for='data in hotcity'
                :key='data.cityId'
                :title="data.cityname"
                @click='handleClick(data.cityname,data.cityId)' />

      <div v-for='data in cityList'
           :key='data.type'>
        <van-index-anchor :index='data.type' />
        <van-cell v-for='item in data.list'
                  :key='item.cityId'
                  :title="item.name"
                  @click='handleClick(item.name,item.cityId)' />
      </div>

    </van-index-bar>
  </div>
</template>
<script>
import http from '@/util/http.js'
import Vue from 'vue'
import { Toast } from 'vant' // 加载中的那个组件
import { mapState, mapMutations, mapActions } from 'vuex'
import mixin from '@/util/mixin.js'
export default {
  mixins: [mixin],//混合，可以看vue文档
  computed: {
    computerList () {
      return this.cityList.map(item => item.type)
    },
  },
  data () {
    return {
      cityList: [],
      hotcity: []
    }
  },
  mounted () {

    http({
      url: '/gateway?k=6464881',
      headers: {
        'X-Host': 'mall.film-ticket.city.list'
      }
    }).then(res => {
      // console.log(res.data.data.cities)

      this.hotcity = this.ishot(res.data.data.cities)
      this.cityList = this.renderCity(res.data.data.cities)
    })
  },

  methods: {
    ...mapMutations(['changeName', 'changeCityId']),
    // 往vuex 里面进行提交动作
    handleClick (name, cityId) {
      // this.$store.commit('changeName', name)
      this.changeName(name)
      // this.$store.commit('changeCityId', cityId)
      this.changeCityId(cityId)
      this.$router.back()
    },
    //当划过字母表。字母表会出现字母，出现时间500ms
    select (data) {
      Toast(data)
      Toast.setDefaultOptions({ duration: 500 });
    },

    // 跟26个拼音一一对比，有这个城市所对应的首字母，以对象的形式放到数组
    renderCity (list) {
      console.log(list)
      var letterList = []
      var cityList = []
      for (var i = 65; i < 91; i++) {
        var b = String.fromCharCode(i)
        letterList.push(b)

        var newlist = list.filter(function (item) {
          // console.log(item.pinyin.substring(0, 1).toUpperCase() === 'A')
          return item.pinyin.substring(0, 1).toUpperCase() === b
        })
        // console.log(newlist)
        if (newlist.length > 0) {
          cityList.push({
            type: b,
            list: newlist
          })
        }
      }
      console.log(cityList)

      return cityList
    },
    //鉴定城市是否是热门城市，把热门城市放到这个数组
    ishot (list) {
      var hotcity = []
      for (var i = 0; i < list.length; i++) {
        if (list[i].isHot == 1) {
          hotcity.push({
            cityname: list[i].name,
            cityId: list[i].cityId
          })
        }
      }
      console.log(hotcity)
      return hotcity
    }

  },
}
</script>
<style lang="scss">
.van-toast--html,
.van-toast--text {
  min-width: 5%;
  min-height: 5%;
  font-size: 1.25rem;
}
</style>